<template>
  <div class="footer">
    <router-link to="/home">
        <ul>
            <router-link 
            tag="li"
            v-for="item in footList"
            :key="item.name"
            :to="item.path"
            >
            <b v-html="item.meta.icon"></b>
            <span>{{item.meta.title}}</span>
            </router-link>
        </ul>
    </router-link>
  </div>
</template>

<script>
import routes from '@/router/routes'
export default {
    name:'myfooter',
    data(){
        return {
            footList:[]
        }
    },
    created(){
        this.footList = routes.filter(route=>route.meta.isTrue)
        console.log(this.footList)
        console.log(this.footList[1].meta.icon)
    }
}
</script>

<style>
.footer ul{
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: #000
}
.footer ul li{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center
}
@font-face {
  font-family: 'iconfont';  /* project id 1969974 */
  src: url('//at.alicdn.com/t/font_1969974_36xg984q9w2.eot');
  src: url('//at.alicdn.com/t/font_1969974_36xg984q9w2.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_1969974_36xg984q9w2.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_1969974_36xg984q9w2.woff') format('woff'),
  url('//at.alicdn.com/t/font_1969974_36xg984q9w2.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_1969974_36xg984q9w2.svg#iconfont') format('svg');
}
b{
    font-family: "iconfont";
    font-size: 22px;
}
</style>
